<template>
  <div>
    <el-row>
      <el-col :span="14">工单项目列表</el-col>
      <el-col
        :span="10"
        align="right"
      >
        <el-button
          type="primary"
          @click="handleDataInsert('套餐选择')"
        >套餐选择</el-button>
        <el-button
          type="primary"
          @click="handleDataInsert('项目选择')"
        >项目选择</el-button>
        <el-button
          type="primary"
          @click="handleDataInsert('新增项目')"
        >新增项目</el-button>
      </el-col>
    </el-row>
    <el-row>
      <data-table
        :value="projectList"
        :total-count="projectList.length"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :localPage="true"
      >
        <template #allNum>
          <div class="tabelAomut">
            <div>项目总金额：<span>￥{{totalAmount}}</span></div>
            <div>项目优惠金额：<span>￥{{totalAmount-totalDiscountAmount}}</span></div>
            <div>项目折后总金额：<span>￥{{totalDiscountAmount}}</span></div>
          </div>
        </template>
        <template #action="{ row,index }">
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"

            @click="delTabelData(index)"
          ></i>
        </template>
      </data-table>
    </el-row>
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      :visible.sync="visible"
      :append-to-body="true"
      :width="'1000px'"
      @close="dialogClose"
    >
      <SelectProject
        v-if="dialogTitle == '项目选择'"
        @getList="changeListCheck"
      />
      <SelectionPackage
        v-if="dialogTitle == '套餐选择'"
        @getList="changeListCheck"
      />
      <AddProject
        v-if="dialogTitle == '新增项目'"
        :addType="false"
        @getList="changeListCheck"
      />
    </el-dialog>
  </div>
</template>
<script>
import DataTable from '@/components/DataTable'
import AddProject from '@/views/after-sale/systemManage/project/addProject';//导入 新增项目 组件
import { SelectProject, SelectionPackage, } from '@/components/index' //导入组件库
export default {
  components: {
    DataTable,
    AddProject,
    SelectionPackage,
    SelectProject,
  },
  props: {
    list: {
      default: () => { return [] },
    }
  },
  data () {
    return {
      visible: false,
      dialogTitle: '',
      projectList: [],//项目列表
      tableColumnAttributes: [
        { name: '项目名', value: 'projectName', type: 'text' },
        { name: '项目工时', value: 'projectHours', type: 'text', render: (row, value) => { return `${value}小时` } },
        { name: '项目类型', value: 'projectType', type: 'text' },
        // { name: '项目所需配件', value: 'licensePlateNumber', type: 'text' },
        { name: '工时费', value: 'amount', type: 'text', render: (row, value) => { return `￥${value}` } },
        { name: '折扣', value: 'discount', type: 'inputNumber', max: 10, precision: 1 },
        {
          name: '折后金额', value: 'shouldAmount', type: 'render',
          render: this.discountAmount,
        },
        { name: '备注', value: 'remark', type: 'text' },
      ],
      totalAmount: 0,//总金额
      totalDiscountAmount: 0 //折后总金额
    }
  },
  watch: {
    projectList: {
      deep: true,
      handler (newValue, oldValue) {
        this.totalAmount = 0;
        this.totalDiscountAmount = 0;
        newValue.forEach((item, index) => {
          // this.totalAmount += Number(item.projectHours * item.amount);
          this.totalAmount += Number(item.amount);
          this.totalDiscountAmount += Number(this.discountAmount(item))
        })
        this.$emit("setTotalAmount");
      }
    }
  },
  computed: {},
  methods: {
    //计算折扣
    discountAmount (row, value) {
      // let sum = row.projectHours * row.amount, _amount = 0;
      let sum = row.amount, _amount = 0;
      if (row.tollType && (row.tollType == '免单' || row.tollType == '返工')) {
        _amount = 0;
      } else {
        _amount = sum;
        if (row.discount > 0) {
          _amount = sum * Number(row.discount / 10);
        }
      }
      return _amount
    },
    handleDataInsert (title) {
      this.visible = true;
      this.dialogTitle = title;
    },
    //表单删除
    delTabelData (index) {
      this.projectList.splice(index, 1);
    },
    //弹窗选择
    changeListCheck (list, partsList) {
      const { projectDiscount } = JSON.parse(sessionStorage.getItem("login"));
      list.forEach(item => {
        item.projectName = item.storeName ? item.storeName : item.projectName;
        item.projectType = item.projectDictValue;
        item.projectHours = item.workHours;
        // item.shouldAmount = item.projectHours * item.amount;
        item.shouldAmount = item.amount;
        item.carProjectId = item.id;
        item.discount = projectDiscount;
        delete item.id
      });
      this.projectList = this.projectList.concat(list);
      this.dialogClose();
    },
    dialogClose () {
      this.visible = false;
    },
  },
  async created () {
    this.projectList = this.list;
  }
}
</script>
<style lang="scss" scoped>
.greeColor {
  color: #85ce61;
}
</style>
